<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
            <div class="logo" />
            <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
                <a-menu-item key="1"  @click="() => (girl=5)">
                    <a-icon type="user" />
                    <span>总览</span>
                </a-menu-item>
                <a-menu-item key="2"  @click="() => {

                    this.$router.push('/List')
                }">
                    <a-icon type="video-camera" />
                    <span>详情</span>
                </a-menu-item>
                <a-menu-item key="3"
                             @click="() => (girl=6)">
                    <a-icon type="upload" />
                    <span>查询</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0">
                <a-icon
                        class="trigger"
                        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                        @click="() => (collapsed = !collapsed)"
                />
            </a-layout-header>
            <a-layout-content
                    :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
            >
<!--                <img :src="require('../assets/'+girl+'.jpg')" alt="picture">-->


                    <div class="loverRow" style="background-color: #ececec; padding: 20px;flex-basis: 100%"

                    >

<!--                        <a-row :gutter="16">-->

<!--                            <a-col :span="8">-->
                                <a-card hoverable style="width: 240px;display: inline-block;margin: 20px;border-radius: 20px"  v-for="(lover,index) in loverList" :key="index">
                                    <img
                                            slot="cover"
                                            alt="example"
                                            :src=lover.pic
                                    />
                                    <a-card-meta :title=lover.name>
                                        <template slot="description">
                                            {{lover.price}}
                                        </template>
                                    </a-card-meta>
                                </a-card>
<!--                            </a-col>-->


<!--                            <a-col :span="8">-->
<!--                                <a-card hoverable style="width: 240px">-->
<!--                                    <img-->
<!--                                            slot="cover"-->
<!--                                            alt="example"-->
<!--                                            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"-->
<!--                                    />-->
<!--                                    <a-card-meta title="Europe Street beat">-->
<!--                                        <template slot="description">-->
<!--                                            www.instagram.com-->
<!--                                        </template>-->
<!--                                    </a-card-meta>-->
<!--                                </a-card>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-card hoverable style="width: 240px">-->
<!--                                    <img-->
<!--                                            slot="cover"-->
<!--                                            alt="example"-->
<!--                                            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"-->
<!--                                    />-->
<!--                                    <a-card-meta title="Europe Street beat">-->
<!--                                        <template slot="description">-->
<!--                                            www.instagram.com-->
<!--                                        </template>-->
<!--                                    </a-card-meta>-->
<!--                                </a-card>-->
<!--                            </a-col>-->
<!--                        </a-row>-->
                    </div>


            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
    export default {
        name:'Hi',
        data() {
            return {
                collapsed: false,
                girl:'1',
                loverList:[]
            };
        },
        mounted() {
            let result = this.$http.get('http://localhost:8080/lover/all')
                .then(response => {
                        console.log(response.data)
                        this.loverList = response.data
                        console.log(this.loverList)
                    }
                )
        },
    };
</script>
<style>
    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }
    .loverRow{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
</style>
